{% extends 'base.html' %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/grades.css">
{% endblock %}

{% block content %}
<div class="detail-container">
    <h1 class="page-title"><i class="fas fa-school"></i> 班级详情</h1>
    
    <div class="detail-card grade-detail">
        <div class="detail-header">
            <div class="grade-icon">
                <i class="fas fa-school"></i>
            </div>
            <div class="grade-info">
                <h2>{{ grade.name }}</h2>
                <div class="grade-meta">
                    <span class="grade-id">📋 班级编号: {{ grade.pk }}</span>
                </div>
            </div>
        </div>
        
        <div class="detail-content">
            <div class="info-section">
                <h3 class="section-title"><i class="fas fa-info-circle"></i> 基本信息</h3>
                <div class="info-grid">
                    <div class="info-row">
                        <span class="info-label">📝 班级描述：</span>
                        <span class="info-value">{{ grade.description|default:"暂无描述" }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">📅 创建时间：</span>
                        <span class="info-value">{{ grade.created_at|date:"Y年m月d日 H:i" }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">🔄 更新时间：</span>
                        <span class="info-value">{{ grade.updated_at|date:"Y年m月d日 H:i" }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="detail-actions">
            <a href="{% url 'grades:grade_list' %}" class="btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回班级列表
            </a>
            <a href="{% url 'grades:grade_update' grade.pk %}" class="btn-primary">
                <i class="fas fa-edit"></i> 编辑班级信息
            </a>
            <a href="{% url 'grades:grade_delete' grade.pk %}" class="btn-danger" onclick="return confirm('确定要删除这个班级吗？此操作不可恢复。')">
                <i class="fas fa-trash"></i> 删除班级
            </a>
        </div>
    </div>
</div>
{% endblock %}